<template>
    <div class="contaier">
        <van-nav-bar title="21天瘦腰计划" left-text="" @click-left="onClickLeft" left-arrow sticky>
            <template #right>
                <img src="../../assets/分享.png" alt="" style="width: 30px;height: 30px;">
            </template>
        </van-nav-bar>
        <div>
            <div class="cultiavtion">
                <div class="cult-img">
                    <img src="../../assets/img/养成7.png" alt="" />
                </div>
                <van-tabs v-model:active="active" class="act" sticky>
                    <van-tab title="介绍">
                        <div class="cult">
                            <div class="cult-box">
                                <div class="cult-left" style="margin-top: 10px;"> <span
                                        style="color: #39d167;margin-left: 10px;">•</span> 难度系数:
                                </div>
                                <div class="cult-right" style="margin-top: 10px;">
                                    &nbsp; &nbsp;<van-icon name="star"
                                        style="color:#ffa800 !important;; z-index: 99999 " />
                                        <van-icon name="star"
                                        style="color:#ffa800 !important;; z-index: 99999 " />
                                        <van-icon name="star"
                                        style="color:#ffa800 !important;; z-index: 99999 " />
                                </div>
                            </div>

                            <div class="cult-box">
                                <div class="cult-left">
                                    <span style="color: #39d167;margin-left: 10px;">•</span> 适用人群:
                                </div>
                                <div class="cult-right">
                                    &nbsp; &nbsp; 全身肥胖，高体脂人群
                                </div>
                            </div>

                            <div class="cult-box">
                                <div class="cult-left"> <span style="color: #39d167;margin-left: 10px;">•</span>
                                    预期效果:
                                </div>
                                <div class="cult-right">
                                    &nbsp; &nbsp; 减脂2-3斤
                                </div>
                            </div>
                            <div style="border-top: 1px solid #f4f4f4;margin-top: 10px;width: 90%;">
                                <div style="margin-top: 10px;">
                                    <p style="padding-right: 1px;">
                                       嗨！腰婆（腩爷）们好！ 对，说的就是你,常自黑“水
                                    </p>
                                    <p style="padding-right: 5px;font-size: 16px;margin-top: 5px">
                                       桶腰 ”，也曾扬言变成“小腰精”的那个人,看着别人的</p>
                                    <p style="margin-top: 5px">小蛮腰，欲哭无泪，有么有？</p>
                                    <p style="margin-top: 5px">腰腹部是身体最容易囤积脂肪的部位之一,久坐不动、</p>
                                    <p style="margin-top: 5px">高油高糖的饮食以及缺乏锻炼,都会一个不小心就变苹</p>
                                    <p style="margin-top: 5px">果或梨形身材。</p>
                                    <p style="margin-top: 5px">如果你已经下定决心要减肥,那么来挑战一下这套高强</p>
                                    <p style="margin-top: 5px">度的有氧+无氧瘦腰计划吧，今天开始每天30分钟,挑</p>
                                    <p style="margin-top: 5px">战两组动作外加GET一条减肥小知识，来吧，为了小</p>
                                    <p style="margin-top: 5px">蛮腰，对自己狠一点！</p>
                                    <p style="margin-top: 5px">特别提示:为了避免事倍功半,本计划建议搭配【减肥</p>
                                    <p style="margin-top: 5px">饮食计划】进行。</p>
                                </div>
                            </div>
                            <div class="center" style="position: relative;">
                                <h3 style="font-weight: 550;">分享评论</h3>
                                <div class="top" style="position: absolute;">
                                    <div class="top_item" style="position: absolute;">
                                        <img src="../../assets/head.jpg" alt=""
                                            style="width: 40px;height: 40px;margin-left: 10px;border-radius: 50%;" />
                                        <span
                                            style="margin-top: -40px;display:flex;margin-left: 70px;font-weight: 700;">空华水月</span>
                                        <span style="margin-top: 1px;display:flex;margin-left: 70px;font-size: 12px;
                                          color: #a0a0a0;">3-18 9:07</span>
                                    </div>
                                </div>
                                <div class="bottom">
                                    <p style="padding-left: 67px;margin-top: 5px;font-size: 14px;">
                                        完成了<span style="color: #58d980;">#21天瘦腰计划#</span>全部任务</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                      老公说真的瘦了，感动，既然如此一定要保持下</p>
                                      <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                      去。。。</p>
                                </div>
                                <div class="top" style="position: absolute;">
                                    <div class="top_item" style="position: absolute;">
                                        <img src="../../assets/bao.jpg" alt=""
                                            style="width: 40px;height: 40px;margin-left: 10px;border-radius: 50%;" />
                                        <span
                                            style="margin-top: -40px;display:flex;margin-left: 70px;font-weight: 700;">浮华落尽</span>
                                        <span style="margin-top: 1px;display:flex;margin-left: 70px;font-size: 12px;
                                          color: #a0a0a0;">3-13 17:21</span>
                                    </div>
                                </div>
                                <div class="bottom1">
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        完成了<span style="color: #58d980;">#21天瘦腰计划#</span>全部任务</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                       遮不住的游泳圈T3T，还得继续锻炼，一起练练练</p>
                                </div>
                                <div class="top" style="position: absolute;">
                                    <div class="top_item" style="position: absolute;">
                                        <img src="../../assets/tu.jpg" alt=""
                                            style="width: 40px;height: 40px;margin-left: 10px;border-radius: 50%;" />
                                        <span
                                            style="margin-top: -40px;display:flex;margin-left: 70px;font-weight: 700;">182****8621</span>
                                        <span style="margin-top: 1px;display:flex;margin-left: 70px;font-size: 12px;
                                          color: #a0a0a0;">3-12 23:12</span>
                                    </div>
                                </div>
                                <div class="bottom1">
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        完成了<span style="color: #58d980;">#21天瘦腰计划#</span>全部任务</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                       一个月前的我，一个月后的我，加油进击的小蛮腰</p>
                                </div>
                            </div>

                        </div>
                    </van-tab>
                    <van-tab title="目录">
                        <div class="day">
                            <div class="day1"><b>共21日</b></div>
                            <div class="day2">
                                <ul>
                                    <li>01日</li>
                                    <li class="hj" style="margin-left: -110px;">燃烧吧胭脂！开合跳60次x4组</li>
                                </ul>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">

                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>02日</li>
                                        <li class="hj" style="margin-left: -110px;">胭脂第二天，开合跳60次x4组</li>
                                    </ul>
                                    <div
                                        style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -10PX;">

                                    </div>
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>03日</li>
                                        <li class="hj" style="margin-left: -125px;">胭脂升级！开合跳60次x5组</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 0.5px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">

                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>04日</li>
                                        <li class="hj" style="margin-left: -128px;">第四天了，最后一波开合跳</li>
                                    </ul>
                                    <div
                                        style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                    </div>
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>05日</li>
                                        <li class="hj" style="margin-left: -80px;">跑不动就用走的，连续快步5000步</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>

                                        <li>06日</li>
                                        <li class="hj" style="margin-left: -110px;">走走走！连续快走超过5000步</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>07日</li>
                                        <li class="hj" style="margin-left: -107px;">加量不加价：连续快走6000步</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>08日</li>
                                        <li class="hj" style="margin-left: -140px;">准备好了吗？还是6000步</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>09日</li>
                                        <li class="hj" style="margin-left: -127px;">老配方：连续快步走6000步</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>10日</li>
                                        <li class="hj" style="margin-left: -205px;">搞定15分钟慢跑</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>11日</li>
                                        <li class="hj" style="margin-left: -181px;">保持匀速慢跑15分钟</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>12日</li>
                                        <li class="hj" style="margin-left: -185px;">15分钟，慢速跑起来</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>13日</li>
                                        <li class="hj" style="margin-left: -179px;">连续快步走7000步！</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>14日</li>
                                        <li class="hj" style="margin-left: -98px;">全身一起瘦，连续快步走7000步</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>15日</li>
                                        <li class="hj" style="margin-left: -206px;">最后一个7000步</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                       <div style="margin-top: 15px;">
                                    <ul>
                                        <li>16日</li>
                                        <li class="hj" style="margin-left: -146px;">6首歌的距离, 慢跑20分钟</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                       <div style="margin-top: 15px;">
                                    <ul>
                                        <li>17日</li>
                                        <li class="hj" style="margin-left: -166px;">出点汗吧，慢跑20分钟</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                       <div style="margin-top: 15px;">
                                    <ul>
                                        <li>18日</li>
                                        <li class="hj" style="margin-left: -176px;">别急，慢慢跑20分钟</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                       <div style="margin-top: 15px;">
                                    <ul>
                                        <li>19日</li>
                                        <li class="hj" style="margin-left: -178px;">连续快步走8000步！</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                       <div style="margin-top: 15px;">
                                    <ul>
                                        <li>20日</li>
                                        <li class="hj" style="margin-left: -178px;">连续快步走8000步！</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                       <div style="margin-top: 15px;">
                                    <ul>
                                        <li>21日</li>
                                        <li class="hj" style="margin-left: -178px;">连续快步走8000步！</li>
                                    </ul>
                                </div>
    
                            </div>
                        </div>
                    </van-tab>

                </van-tabs>
            </div>

        </div>
    </div>
    <div style="width: 95%;height: 100px;background-color: white;position: fixed;bottom: 0;left: 7px;">
        <button style="width: 98%;height: 50px;background-color:#39d167;margin-top: 42px;border: none;
        outline: none;color: white;position: absolute;left: 5px;border-bottom: 0px;">加入计划</button>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const active = ref(0);
const onClickLeft = () => {
    router.push({ path: "/jiankang" })
}

</script>

<style lang="scss" scoped>
:deep(.van-icon) {
    color: #000 !important
}

.cultiavtion {
    position: relative;
    width: 100%;
    height: 1250px;
    overflow: hidden;

    .cult-img {
        width: 100%;
        height: 150px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .cult {
        .cult-box {
            width: 120%;
            height: 42px;
        }

        .cult-left {
            float: left;
            height: 40px;
            text-align: center;
            padding-top: 10px;
        }

        .cult-right {
            float: left;
            height: 40px;
            width: 70%;
            text-align: left;
            padding-top: 10px;
        }
    }
}

[data-v-ca42e025] .van-icon {
    color: #ffa800 !important;
}

:deep(.van-tabs__line) {
    position: absolute;
    bottom: 15px;
    left: 0;
    z-index: 1;
    background: #39d167;
    border-radius: var(--van-tabs-bottom-bar-height);
}

.day {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    margin-left: 15px;

    .day1 {
        width: 100%;
        height: 30px;
        font-size: 19px;
        margin-left: 1px;
    }

    .day2 {
        width: 100%;
        height: 480px;
        margin-top: 15px;
        overflow-y: scroll;

        ul {
            height: 50px;
            display: flex;
            justify-items: center;

            li {
                color: #a7a7a7;
                margin-left: 1px;
            }

            .hj {
                margin-left: -150px;
            }
        }
    }
}

.center {
    h3 {
        margin-top: 60px;
        margin-left: 10px;
        margin-bottom: 25px;
    }

    .top {
        position: absolute;
        width: 100%;
        height: 50px;

        .top_item {
            // background-color: red;
            position: absolute;
            width: 100%;
            height: 50px;
        }

        // background-color: red;
    }

    .bottom {
        margin-top: 75px;
        width: 100%;
        height: 80px;
        // background-color: gray;
        border-bottom: 1px solid #f4f4f4;
    }

    .bottom1 {
        margin-top: 40px;
        width: 100%;
        height: 90px;
        border-bottom: 1px solid #f4f4f4;
    }

    .bottom2 {
        // margin-top: 75px;
        width: 100%;
        height: 120px;
        // background-color: gray;
        border-bottom: 1px solid #f4f4f4;
    }
}
</style>